<!--
@description: 标题组件
@author: heZiMing
@time: 2024/3/20 时间
-->
<template>
  <view class="title" :style="{padding: rowPadding,background:bgColor,borderRadius: borderRadius}">
    <view class="title__left flex-shrink">
      <slot name="left-slot"></slot>
      <view class="title__left__box" :style="{color:titleColor,fontWeight:titleFontWeight}">{{ title }}</view>
    </view>
    <view class="title__right flex-shrink">
      <view class="title__right__box" :style="{color:rightColor}">{{ rightValue }}</view>
      <slot name="right-slot"></slot>
    </view>
  </view>
</template>

<script>
/**
 * @param {left-slot} 左边插槽
 * @param {right-slot} 右边的插槽
 */
export default {
  name: "lr-titleRow",
  props: {
    //左边的内容
    title: {
      type: String,
      default: '这里是标题'
    },
    //左边文字颜色
    titleColor: {
      type: String,
      default: '#000000'
    },
    //左边文字加粗
    titleFontWeight:{
      type: String,
      default: '500'
    },
    //右边的内容
    rightValue: {
      type: String,
      default: ''
    },
    //右边文字颜色
    rightColor: {
      type: String,
      default: '#000000'
    },
    //padding
    rowPadding: {
      type: String,
      default: '24rpx 20rpx'
    },
    //背景颜色 transparent
    bgColor: {
      type: String,
      default: '#ffffff'
    },
    //圆角值
    borderRadius: {
      type: String,
      default: '16rpx'
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__left {
    flex-shrink: 0;
    display: flex;
    align-items: center;

    &__box {
      display: flex;
      align-items: center;
    }
  }

  &__right {
    flex-shrink: 0;
    display: flex;
    align-items: center;

    &__box {
      display: flex;
      align-items: center;
      font-size: 24rpx;
    }
  }

  .slot-css {
    display: inline-block;
    padding: 0;
  }
}
</style>
